<template>
  <div class="container" style="background: #F2F3F5;;">

    <Head />
    <div class="pageuserInfo">
      <!--顶部图 -->
      <div class="profile-top">
        <img src="/src/assets/images/userBack.png" style="width: 100%;height:100%" alt="">
      </div>
      <div class="profile-page">

        <!-- 左侧导航栏 -->
        <div class="sidebar">
          <div class="nav-tags" style="display: flex; flex-direction: column;margin-top: 15px;">
            <el-tag v-for="item in navItems" :key="item.index" :type="activeMenu === item.index ? 'primary' : 'info'"
              style="margin: 5px; cursor: pointer;" @click="activeMenu = item.index">
              {{ item.title }}
            </el-tag>
          </div>
        </div>

        <el-divider direction="vertical" style="height: 33em;" />

        <!-- 右侧内容区域 -->
        <el-main class="right-content">
          <Profile v-if="activeMenu === 'profile'" />
          <UserInfoMessage v-else-if="activeMenu === 'messages'" />
        </el-main>
      </div>
    </div>

  </div>

</template>
<script setup>
import { ref } from 'vue'
import Head from '@/components/Head.vue'
import Profile from '@/components/Profile.vue'
import UserInfoMessage from '@/components/UserInfoMessage.vue'

const activeMenu = ref('profile')

// 导航按钮配置
const navItems = [
  { index: 'profile', title: '个人信息' },
  { index: 'messages', title: '消息提醒' },
]
</script>

<style>
.container{
width: 100%;
height: 100vh;
background: rgb(242, 243, 245);
}
.pageuserInfo{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  height: calc(100vh - 60px);
  margin: auto;
  background: white;
}

.profile-page{
  display: flex;
    justify-content: center;
    height: 550px;
    width: 98%;
}

.profile-top{
  width: 98%;
}
</style>